jQuery UI 实例 – 自动完成(Autocomplete)

您所在的位置:网站首页 jquery ui autocomplete高度不协调 jQuery UI 实例 – 自动完成(Autocomplete)

jQuery UI 实例 – 自动完成(Autocomplete)

2022-05-21 06:09| 来源: 网络整理| 查看: 265

jQuery UI 实例 - 自动完成(Autocomplete)

jQuery UI的自动完成(Autocomplete)是根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择。

如需了解更多有关autocomplete部件的细节,请查看API文档自动完成部件(Autocomplete Widget)。

默认功能

当您在输入域中输入时,自动完成(Autocomplete)部件提供相应的建议。在本实例中,提供了编程语言的建议选项,您可以输入"ja"尝试一下,可以得到Java或 JavaScript。

数据源是一个简单的JavaScript数组,使用source选项提供给部件。

jQuery UI 自动完成(Autocomplete) - 默认功能 $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $( "#tags" ).autocomplete({ source: availableTags }); }); 标签:

包含重音

autocomplete域使用自定义的source选项来匹配带有重音字符的结果项,即使文本域不包含重音字符也会匹配。但是如果您在文本域中键入了重音字符,则不会显示非重音的结果项。

尝试键入"Jo",会看到"John"和"Jörn",然后键入"Jö",只会看到"Jörn"。

jQuery UI 自动完成(Autocomplete) - 包含重音 $(function() { var names = [ "Jörn Zaefferer", "Scott González", "John Resig" ]; var accentMap = { "á": "a", "ö": "o" }; var normalize = function( term ) { var ret = ""; for ( var i = 0; i < term.length; i++ ) { ret += accentMap[ term.charAt(i) ] || term.charAt(i); } return ret; }; $( "#developer" ).autocomplete({ source: function( request, response ) { var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" ); response( $.grep( names, function( value ) { value = value.label || value.value || value; return matcher.test( value ) || matcher.test( normalize( value ) ); }) ); } }); }); 开发人员:

分类

分类的搜索结果。尝试键入"a"或"n"。

jQuery UI 自动完成(Autocomplete) - 分类 .ui-autocomplete-category { font-weight: bold; padding: .2em .4em; margin: .8em 0 .2em; line-height: 1.5; } $.widget( "custom.catcomplete", $.ui.autocomplete, { _renderMenu: function( ul, items ) { var that = this, currentCategory = ""; $.each( items, function( index, item ) { if ( item.category != currentCategory ) { ul.append( "" + item.category + "" ); currentCategory = item.category; } that._renderItemData( ul, item ); }); } }); $(function() { var data = [ { label: "anders", category: "" }, { label: "andreas", category: "" }, { label: "antal", category: "" }, { label: "annhhx10", category: "Products" }, { label: "annk K12", category: "Products" }, { label: "annttop C13", category: "Products" }, { label: "anders andersson", category: "People" }, { label: "andreas andersson", category: "People" }, { label: "andreas johnson", category: "People" } ]; $( "#search" ).catcomplete({ delay: 0, source: data }); }); 搜索:

组合框(Combobox)

一个由Autocomplete和Button创建的自定义部件。您可以键入一些字符,来获得基于您的输入过滤的结果,或者使用按钮从完整列表中选择。

该输入是从一个已有的select元素中读取,传递给带有自定义的source选项的Autocomplete。

这是一个不被支持的不完美的部件。这里纯粹是为了演示autocomplete定制功能。如需了解更多有关该部件工作原理的细节,请点击这里查看相关的jQuery文章。

jQuery UI 自动完成(Autocomplete) - 组合框(Combobox) .custom-combobox { position: relative; display: inline-block; } .custom-combobox-toggle { position: absolute; top: 0; bottom: 0; margin-left: -1px; padding: 0; /* 支持: IE7 */ *height: 1.7em; *top: 0.1em; } .custom-combobox-input { margin: 0; padding: 0.3em; } (function( $ ) { $.widget( "custom.combobox", { _create: function() { this.wrapper = $( "" ) .addClass( "custom-combobox" ) .insertAfter( this.element ); this.element.hide(); this._createAutocomplete(); this._createShowAllButton(); }, _createAutocomplete: function() { var selected = this.element.children( ":selected" ), value = selected.val() ? selected.text() : ""; this.input = $( "" ) .appendTo( this.wrapper ) .val( value ) .attr( "title", "" ) .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" ) .autocomplete({ delay: 0, minLength: 0, source: $.proxy( this, "_source" ) }) .tooltip({ tooltipClass: "ui-state-highlight" }); this._on( this.input, { autocompleteselect: function( event, ui ) { ui.item.option.selected = true; this._trigger( "select", event, { item: ui.item.option }); }, autocompletechange: "_removeIfInvalid" }); }, _createShowAllButton: function() { var input = this.input, wasOpen = false; $( "" ) .attr( "tabIndex", -1 ) .attr( "title", "Show All Items" ) .tooltip() .appendTo( this.wrapper ) .button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false }) .removeClass( "ui-corner-all" ) .addClass( "custom-combobox-toggle ui-corner-right" ) .mousedown(function() { wasOpen = input.autocomplete( "widget" ).is( ":visible" ); }) .click(function() { input.focus(); // 如果已经可见则关闭 if ( wasOpen ) { return; } // 传递空字符串作为搜索的值,显示所有的结果 input.autocomplete( "search", "" ); }); }, _source: function( request, response ) { var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" ); response( this.element.children( "option" ).map(function() { var text = $( this ).text(); if ( this.value && ( !request.term || matcher.test(text) ) ) return { label: text, value: text, option: this }; }) ); }, _removeIfInvalid: function( event, ui ) { // 选择一项,不执行其他动作 if ( ui.item ) { return; } // 搜索一个匹配(不区分大小写) var value = this.input.val(), valueLowerCase = value.toLowerCase(), valid = false; this.element.children( "option" ).each(function() { if ( $( this ).text().toLowerCase() === valueLowerCase ) { this.selected = valid = true; return false; } }); // 找到一个匹配,不执行其他动作 if ( valid ) { return; } // 移除无效的值 this.input .val( "" ) .attr( "title", value + " didn't match any item" ) .tooltip( "open" ); this.element.val( "" ); this._delay(function() { this.input.tooltip( "close" ).attr( "title", "" ); }, 2500 ); this.input.data( "ui-autocomplete" ).term = ""; }, _destroy: function() { this.wrapper.remove(); this.element.show(); } }); })( jQuery ); $(function() { $( "#combobox" ).combobox(); $( "#toggle" ).click(function() { $( "#combobox" ).toggle(); }); }); 您喜欢的编程语言: 请选择... ActionScript AppleScript Asp BASIC C C++ Clojure COBOL ColdFusion Erlang Fortran Groovy Haskell Java JavaScript Lisp Perl PHP Python Ruby Scala Scheme 显示基础的选择框

自定义数据并显示

您可以使用自定义数据格式,并通过简单地重载默认的聚焦和选择行为来显示数据。

尝试键入"j",或者按向下箭头按键,即可得到一个项目列表。

jQuery UI 自动完成(Autocomplete) - 自定义数据并显示 #project-label { display: block; font-weight: bold; margin-bottom: 1em; } #project-icon { float: left; height: 32px; width: 32px; } #project-description { margin: 0; padding: 0; } $(function() { var projects = [ { value: "jquery", label: "jQuery", desc: "the write less, do more, JavaScript library", icon: "jquery_32x32.png" }, { value: "jquery-ui", label: "jQuery UI", desc: "the official user interface library for jQuery", icon: "jqueryui_32x32.png" }, { value: "sizzlejs", label: "Sizzle JS", desc: "a pure-JavaScript CSS selector engine", icon: "sizzlejs_32x32.png" } ]; $( "#project" ).autocomplete({ minLength: 0, source: projects, focus: function( event, ui ) { $( "#project" ).val( ui.item.label ); return false; }, select: function( event, ui ) { $( "#project" ).val( ui.item.label ); $( "#project-id" ).val( ui.item.value ); $( "#project-description" ).html( ui.item.desc ); $( "#project-icon" ).attr( "src", "images/" + ui.item.icon ); return false; } }) .data( "ui-autocomplete" )._renderItem = function( ul, item ) { return $( "" ) .append( "" + item.label + "" + item.desc + "" ) .appendTo( ul ); }; }); 选择一个项目(请键入 "j"):

多个值

用法:键入一些字符,比如"j",可以看到相关的编程语言结果。选择一个值,然后继续键入字符来添加其他的值。

本实例演示如何使用source选项和一些事件来实现在一个单一的文本域输入多个自动完成的值。

jQuery UI 自动完成(Autocomplete) - 多个值 $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; function split( val ) { return val.split( /,\s*/ ); } function extractLast( term ) { return split( term ).pop(); } $( "#tags" ) // 当选择一个条目时不离开文本域 .bind( "keydown", function( event ) { if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "ui-autocomplete" ).menu.active ) { event.preventDefault(); } }) .autocomplete({ minLength: 0, source: function( request, response ) { // 回到 autocomplete,但是提取最后的条目 response( $.ui.autocomplete.filter( availableTags, extractLast( request.term ) ) ); }, focus: function() { // 防止在获得焦点时插入值 return false; }, select: function( event, ui ) { var terms = split( this.value ); // 移除当前输入 terms.pop(); // 添加被选项 terms.push( ui.item.value ); // 添加占位符,在结尾添加逗号+空格 terms.push( "" ); this.value = terms.join( ", " ); return false; } }); }); 编程语言:

多个值,远程

用法:键入至少两个字符来获取鸟的名称。选择一个值,然后继续键入字符来添加其他的值。

本实例演示如何使用source选项和一些事件来实现在一个单一的文本域输入多个自动完成的值。

jQuery UI 自动完成(Autocomplete) - 多个值,远程 .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } $(function() { function split( val ) { return val.split( /,\s*/ ); } function extractLast( term ) { return split( term ).pop(); } $( "#birds" ) // 当选择一个条目时不离开文本域 .bind( "keydown", function( event ) { if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "ui-autocomplete" ).menu.active ) { event.preventDefault(); } }) .autocomplete({ source: function( request, response ) { $.getJSON( "search.php", { term: extractLast( request.term ) }, response ); }, search: function() { // 自定义最小长度 var term = extractLast( this.value ); if ( term.length < 2 ) { return false; } }, focus: function() { // 防止在获得焦点时插入值 return false; }, select: function( event, ui ) { var terms = split( this.value ); // 移除当前输入 terms.pop(); // 添加被选项 terms.push( ui.item.value ); // 添加占位符,在结尾添加逗号+空格 terms.push( "" ); this.value = terms.join( ", " ); return false; } }); }); 鸟:

远程 JSONP 数据源

当您在文本域中键入字符时,Autocomplete部件给出建议结果。在本实例中,当您在文本域中至少键入两个字符时,将显示相关城市的名称。

在本实例中,数据源是geonames.org webservice。虽然选择一个元素后文本域中是该城市名称,但是会显示更多的信息以便找到正确的条目。数据也可以回调,显示在下面的结果框中。

jQuery UI 自动完成(Autocomplete) - 远程 JSONP 数据源 .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } #city { width: 25em; } $(function() { function log( message ) { $( "" ).text( message ).prependTo( "#log" ); $( "#log" ).scrollTop( 0 ); } $( "#city" ).autocomplete({ source: function( request, response ) { $.ajax({ url: "http://ws.geonames.org/searchJSON", dataType: "jsonp", data: { featureClass: "P", style: "full", maxRows: 12, name_startsWith: request.term }, success: function( data ) { response( $.map( data.geonames, function( item ) { return { label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName, value: item.name } })); } }); }, minLength: 2, select: function( event, ui ) { log( ui.item ? "Selected: " + ui.item.label : "Nothing selected, input was " + this.value); }, open: function() { $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" ); }, close: function() { $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" ); } }); }); 您的城市: Powered by geonames.org 结果:

远程数据源

当您在文本域中键入字符时,Autocomplete部件给出建议结果。在本实例中,当您在文本域中至少键入两个字符时,将显示相关鸟的名称。

在本实例中,数据源是可返回JSON数据的服务器端脚本,通过一个简单的source选项来指定。另外,minLength选项设置为2,避免查询返回太多的结果,select事件用于显示一些反馈。

jQuery UI 自动完成(Autocomplete) - 远程数据源 .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } $(function() { function log( message ) { $( "" ).text( message ).prependTo( "#log" ); $( "#log" ).scrollTop( 0 ); } $( "#birds" ).autocomplete({ source: "search.php", minLength: 2, select: function( event, ui ) { log( ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.id : "Nothing selected, input was " + this.value ); } }); }); 鸟: 结果:

远程缓存

当您在文本域中键入字符时,Autocomplete部件给出建议结果。在本实例中,当您在文本域中至少键入两个字符时,将显示相关鸟的名称。

为了提高性能,这里添加了一些本地缓存,其他与远程数据源实例相似。在这里,缓存只保存了一个查询,并可以扩展到缓存多个值,每个条目一个值。

jQuery UI 自动完成(Autocomplete) - 远程缓存 .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } $(function() { var cache = {}; $( "#birds" ).autocomplete({ minLength: 2, source: function( request, response ) { var term = request.term; if ( term in cache ) { response( cache[ term ] ); return; } $.getJSON( "search.php", request, function( data, status, xhr ) { cache[ term ] = data; response( data ); }); } }); }); 鸟:

可滚动的结果

当显示一个长列表的选项时,您可以简单地为autocomplete菜单设置max-height来防止菜单显示太长。尝试键入"a"或"s"来获得一个可滚动的长列表的结果。

jQuery UI 自动完成(Autocomplete) - 可滚动的结果 .ui-autocomplete { max-height: 100px; overflow-y: auto; /* 防止水平滚动条 */ overflow-x: hidden; } /* IE 6 不支持 max-height * 我们使用 height 代替,但是这会强制菜单总是显示为那个高度 */ * html .ui-autocomplete { height: 100px; } $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $( "#tags" ).autocomplete({ source: availableTags }); }); 标签:

XML 数据

本实例演示如何获取一些XML数据,并使用jQuery的方法解析它,然后把它提供给autocomplete作为数据源。

本实例也可作为解析远程XML数据源的参考 - 解析在每次source回调请求时发生。

jQuery UI 自动完成(Autocomplete) - XML 数据 .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } $(function() { function log( message ) { $( "" ).text( message ).prependTo( "#log" ); $( "#log" ).attr( "scrollTop", 0 ); } $.ajax({ url: "london.xml", dataType: "xml", success: function( xmlResponse ) { var data = $( "geoname", xmlResponse ).map(function() { return { value: $( "name", this ).text() + ", " + ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ), id: $( "geonameId", this ).text() }; }).get(); $( "#birds" ).autocomplete({ source: data, minLength: 0, select: function( event, ui ) { log( ui.item ? "Selected: " + ui.item.value + ", geonameId: " + ui.item.id : "Nothing selected, input was " + this.value ); } }); } }); }); London 匹配: 结果:



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3